import React, {Component} from 'react';
import {connect} from "react-redux";
import {Button, Layout, Table, Tag, Space, Popover, message} from 'antd';
import {Switch,Route,Redirect} from 'react-router-dom'
import {testSend} from "../../API/API";
import './index.css'
import TodoInfo from './TodoInfo'
import UserInfo from "./UserInfo";
import {createLogoutAction} from "../../redux/user/user_action";
import bg2 from "../../image/bg2.jpg"

const {Header, Footer, Content} = Layout;

class Main extends Component {
    state = {
        //待做任务数量
        todoCount: 0,
        //标题
        title:''
    }


    componentDidMount() {
        this.test();
        //如果没登录，就去登录
        if (!this.props.userInfo.isLogin) {
            this.props.history.push('/login')
        }

    }

    //从子组件获取待办任务数量
    getTodos = (todoCount) => {
        this.setState({todoCount})
    }

    //获取标题
    getTitle = (title) => {
        this.setState({title})
    }

    //测试是否登录
    test = async () => {
        const {data} = await testSend()
    }

    //查看redux里面的数据
    show = () => {
        console.log(this.props.userInfo)
    }

    //推出登录
    logout = () => {
        //推出登录
        this.props.logout()
        message.success('已退出登录')
        this.props.history.push('/login')
    }

    render() {
        const {userInfo,todoInfo} = this.props
        console.log('redux中',todoInfo)
        return (
            <div className={'main'}>
                {/*<img className={'bac'} src={bg2} alt=""/>*/}
                    <div>
                        <div className={'header'}>
                            <span className={'left'}>{todoInfo.title}</span>
                            <span className='right'>
                            <Popover
                                content={
                                    <div>
                                        <Button type={'text'} onClick={this.logout}>退出登录</Button>
                                        <Button type={'text'} onClick={()=>{this.props.history.push('/main/userInfo')}}>个人信息</Button>
                                    </div>
                                }
                                title="用户操作"
                                trigger="click"
                            >
                                <Button type={'text'} className={'but1'}>
                                    用户名：{userInfo.username}
                                </Button>
                            </Popover>
                                &nbsp;
                                待做任务：{todoInfo.todoCount}
                        </span>
                        </div>
                        <div className={'content'}>
                            <Switch>
                                <Route path={'/main/todoInfo'} component={TodoInfo}/>
                                <Route path={'/main/userInfo'} component={UserInfo}/>
                                <Redirect to={'/main/todoInfo'}/>
                            </Switch>
                        </div>
                        <div className={'footer'}><span>最是人间留不住，朱颜辞镜花辞树。</span></div>
                    </div>
                </div>
        );
    }
}

export default connect(
    (state) => {
        return {userInfo: state.userInfo,todoInfo: state.todoInfo}
    }, {
        logout: createLogoutAction
    }
)(Main);